﻿<template>

    <div class="wish_container" >
        <header class="wish_header" ref="wish_header" >
          <img src="../../static/img/new_style_go_back.png" class="back_c" ref="back_btn"/>
          <span class="wish_header_n">
            {{d_wish.title}}
          </span>

          <img src="../../static/img/new_dot.png" alt="Alternate Text" class="wish_detail_header_detail" v-on:click="show_header_detail"/>
          <!-- wish detail list s -->
          <ul class="wish_detail_list" v-show="show_header_detail_d">
            <li class="wish_detail_list_btn" v-on:click="collect">
                <img src="../../static/img/wish_detail_collect.png" class="wish_detail_list_img">
                <span>收藏</span>
            </li>
            <li class="wish_detail_list_btn" v-on:click="share_t_f">
              <img src="../../static/img/wish_detail_share.png" class="wish_detail_list_img" >
              <span>分享</span>
            </li>
            <li class="wish_detail_list_btn" v-on:click="add_tian">
              <img src="../../static/img/wish_detail_flag.png" class="wish_detail_list_img">
              <span>提案</span>
            </li>
            <li class="wish_detail_list_btn" v-show="!is_Me" v-on:click="join_wish">
              <img src="../../static/img/add_wish_detail.png" class="wish_detail_list_img">
              <span>参与</span>
            </li>
            <!--<li class="wish_detail_list_btn" v-show="!is_Me">-->
              <!--<span>匿名参与</span>-->
            <!--</li>-->
            <li class="wish_detail_list_btn" v-show="is_Me">
              <span>完成</span>
            </li>
          </ul>
          <!-- wish detail list e -->
          <ul></ul>
        </header>

      <!-- wish_detail img ss -->

      <img v-bind:src="d_wish.image|new_img_show_base" class="bg_all_w_d" ref="bg_all_w_d">

      <!-- wish_detail img ee -->

      <!-- wish_detail nav s -->
      <div class="wish_detail_nav" ref="wish_detail_nav">
        <div class="wish_detail_name">
          <span>发起人</span>
          <img v-bind:src="user_image|new_img_show_base" class="wish_detail_name_img"/>
        </div>
        <div class="wish_detail_people">
          参与人数：{{p_num}}
        </div>
      </div>
      <!-- wish_detail nav e -->


      <!-- wish_detail main s -->
      <div class="wish_detail_main" ref="wish_detail_main">

        <!-- shema list s -->
        <div class="wish_detail_Main_scheme_list_wrapper">
          <img src="../../static/img/wish_detail_chema_list.png" class="wish_detail_chema_list" v-on:click="list_show_c_f">
          <img src="../../static/img/user_index/top.png" alt="" class="top_png" v-on:click="go_top_link"/>
          <ul class="wish_detail_Main_scheme_list_real" v-show="list_show_c" >
            <li class="wish_detail_main_S_list_box" v-for="(item, index) in d_wish.wishSchemes" v-on:click="link_this_page((index+1)*150)">
              方案{{index+1}}
            </li>
          </ul>
        </div>
        <!-- shema list e -->

        <div class="wish_detail_main_top_btn wish_detail_header_left" v-on:click="p_detaill_got">进度详情</div>
        <div class="wish_detail_main_top_btn wish_detail_header_right" v-on:click="check_comment">查看评论</div>
        <!-- wish_detail_main real s -->
        <div class="wish_detail_main_user_name">
          参与者
        </div>
        <!-- wish_detail_main real e -->
        <div class="wish_detail_main_wish_detail">
          <div class="wish_detail_main_wish_detail_header">
            愿望描述
          </div>
          <div class="wish_detaill_main_mess" v-html="d_wish.describe">

          </div>
        </div>

          <!--main-->
          <!-- 愿望方案 s -->
          <div class="input_wish_header" v-for="(item, index) in d_wish.wishSchemes">
            <div class="wish_detail_main_wish_detail_header pl_header_scheme" >
              方案{{index+1}}
              <div class="pl_header">
                <img src="../../static/img/show_down.png" alt="" style="height:4vw;width:5vw;display: inline-block;vertical-align: middle;" v-on:click="pl_header_img($event)">
                <ul class="wish_detail_list" style="top: 6vw;right: -2.2vw;height: 36vw;display: none">

                  <li class="wish_detail_list_btn" v-on:click="collect">
                    <img src="../../static/img/wish_detail_collect.png" class="wish_detail_list_img">
                    <span>评论</span>
                  </li>
                  <li class="wish_detail_list_btn">
                    <img src="../../static/img/wish_detail_share.png" class="wish_detail_list_img" v-on:click="share_t_f">
                    <span>分享</span>
                  </li>
                  <li class="wish_detail_list_btn" v-on:click="agree_act">
                    <img src="../../static/img/agree_wish.png" class="wish_detail_list_img" style="width:5.8vw;">
                    <span>赞同</span>
                  </li>
                  <li class="wish_detail_list_btn" v-show="!is_Me" v-on:click="select_w_d_f">
                    <img src="../../static/img/no_select_wish.png" class="wish_detail_list_img" style="width: 5.8vw;" v-show="!!item.status">
                    <img src="../../static/img/select_wish.png" class="wish_detail_list_img" style="width: 5.8vw;" v-show="!!!item.status">
                    <span>选择</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="input_wish_header_n clearfix">
              <div class="input_wish_header_left clearfix">
                <img v-bind:src="item.image|new_img_show_base" class="image_n">
                <p class="input_wish_header_left_id">
                  {{item.ident}}
                </p>
                <p class="input_wish_header_left_name">
                  {{item.userName}}
                </p>
              </div>

              <div class="input_wish_header_right">
                <div class="input_wish_header_title_inner">
                  <span style="margin-left:3vw;">方案描述</span>
                </div>
                <div class="input_wish_main" ref="input_wish_main">
                    {{item.describe}}
              </div>
              </div>

            </div>

            <div class="wish_need">
              <div class="wish_need_header">
                <span style="margin-left:3vw;">方案所需-</span>
              </div>
              <div style="text-align:left;height:4vw;line-height:4vw;margin-top:2vw;">
              <span style="color:#6d6d6d;font-size:2.5vw;margin-left:3.2vw;">
                技能：<span type="text" name="name" value="" style="border:0;" ref="skill">{{item.skill}}</span>
              </span>
              </div>
              <div style="text-align:left;height:4vw;line-height:4vw;margin-top:2vw;">
              <span style="color:#6d6d6d;font-size:2.5vw;margin-left:3.2vw;">
                资源：<span type="text" name="name" value="" style="border:0;" ref="res">{{item.resource}}</span>
              </span>
              </div>
              <div style="text-align:left;height:4vw;line-height:4vw;margin-top:2vw;">
              <span style="color:#6d6d6d;font-size:2.5vw;margin-left:3.2vw;">
                其他：<span type="text" name="name" value="" style="border:0;" ref="other">{{item.other}}</span>
              </span>
              </div>
            </div>
            <!--<div class="input_wish_header_middle_img">
              <img src="../../static/img/input_wish_input_img.png" class="input_wish_input_img">
            </div>-->
            <!--<div class="input_wish_header_bottom">
              <div class="input_wish_header_b_btn input_wish_header_b_btn_1">
                取消
              </div>
              <div class="input_wish_header_b_btn input_wish_header_b_btn_2">
                确认
              </div>
            </div>-->
            <div style="text-align: right;">
              <img src="../../static/img/agree_wish_show.png" style="display: inline-block;width:7.4vw;vertical-align: bottom; ">
              <span style="font-size:3.5vw;color:#aaa;vertical-align: text-top;margin-right: 6.6vw">
                赞同数{{item.loves.length}}
              </span>
            </div>
          </div>
      </div>
      <!-- wish_detail main e -->
      <share_t ref="share_t"></share_t>
    </div>

</template>

<script>
  import '../../static/css/FooterMenu.css';
  import {mapState, mapMutations, mapActions} from 'vuex';
  import store from '../vuex/store_index';
  import common from "../common/common.js"
  import use_rem from "../../static/js/use_rem.js"
  import qs from 'qs';
  import { Toast, Indicator } from 'mint-ui';
  import share_t from "../common/wx_share_temp/wx_share_temp.vue"
  use_rem();
  export default {
    name: 'FooterMenu',
    data () {
      return {
        menu_list: this.$store.getters.get_footer_menu_list,
        sign_c: true,
        show_header_detail_d:false,
        d_wish:"",
        user_image:"",
        p_num:"",
        list_show_c:false,
        is_Me:false,
        select_w_d:false
      }
    },
    computed: mapState([
      'footer_menu_list'
    ]),
    methods: {
      ...mapActions(['redirect']),
      check_comment:function(){
          console.log("check_comment_")
        this.$store.dispatch("thom_redirect",
          { name: "/comment", router: this.$router });
      },
      add_tian:function () {
        this.$store.dispatch("thom_redirect",
          { name: "/wx_add_scheme_wish", router: this.$router });
      },
      p_detaill_got:function () {
        this.$store.dispatch("thom_redirect",
          { name: "/wish_progress", router: this.$router });
      },
      agree_act:function () {
//        /api/user/wish/updateAgree
        Indicator.open();
        this.$http.put('/yizhiweimen/api/user/wish/updateAgree/'+sessionStorage.getItem("wish_detail_id"),
          {
            'id': sessionStorage.getItem("wish_detail_id")
          } , {
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            }
          }
        ).catch((thrown) => {
          Indicator.close();
          console.log(thrown)
        }).then((e) => {
          Indicator.close();
          console.log(e)
        })
      },
      select_w_d_f:function () {
        this.select_w_d = !this.select_w_d;
//        /api/user/wish/updateWish
        Indicator.open();
        this.$http.put('/yizhiweimen/api/user/wish/updateWish',
            {
              'id': sessionStorage.getItem("wish_detail_id"),
              "schedule": 1
            } , {
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            }
          }
        ).catch((thrown) => {
            Indicator.close();
            console.log(thrown)
          }).then((e) => {
            Indicator.close();
            console.log(e.data)
        })
      },
      pl_header_img:function (el){//方案操作列表
        let dom =  el.target.nextElementSibling;
        dom.style.display  == "block" ?  dom.style.display = "none": dom.style.display="block";
      },
      share_this:function () {

      },
      collect:function () {//收藏
            common.collect_c({
              'sortId': 2,
              "userId": sessionStorage.getItem("user_id"),
              "collectId":sessionStorage.getItem("wish_detail_id")
            },Indicator,qs,this)
      },
      act_in:function () {
//      /api/user/wish/addWishJoin
        Indicator.open();
        this.$http.post('/yizhiweimen/api/user/wish/addWishJoin',
          qs.stringify(
            {
              'wishId': sessionStorage.getItem("wish_detail_id"),
              "userId": sessionStorage.getItem("user_id")
            })
          )
          .catch((thrown) => {
            Indicator.close();
          }).then((e) => {
          Indicator.close();
        })
      },
      join_wish:function(){
//        /api/user/wish/addWishJoin
        Indicator.open();
        this.$http.post('/yizhiweimen/api/user/wish/addWishJoin',
          qs.stringify(
            {
              'wishId': sessionStorage.getItem("wish_detail_id"),
              "userId": sessionStorage.getItem("user_id")
            })
        )
          .catch((thrown) => {
            Indicator.close();
          }).then((e) => {
          Indicator.close();
        })
      },
      share_t_f:function () {
        this.$refs.share_t.share_show();
      },
      go_top_link:function () {
        this.$refs.wish_detail_main.scrollTop = 0;
      },
      show_header_detail:function () {
        this.show_header_detail_d = !this.show_header_detail_d
      },
      link_this_page:function (e) {
        this.$refs.wish_detail_main.scrollTop = e;
      },
      list_show_c_f:function () {
        this.list_show_c = ! this.list_show_c;
      },
      jump: function (name) {
        let id = name.replace("./", "");
        //common.jump({
        //  url: name,
        //  id: id
        //});

        //关闭所有 webview
        let all = plus.webview.all();
        //current webview
        var curr = plus.webview.currentWebview();
        for (let i = 0, len = all.length; i < len; i++) {
          //关闭除setting页面外的其他页面
          if (all[i].getURL() == curr.getURL())
            continue;
            plus.webview.close(all[i]);
        }

        mui.openWindow({
          url:name,
          id: id,
          createNew: false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
          show: {
            autoShow: true,//页面loaded事件发生后自动显示，默认为true
            aniShow: "zoom-fade-in",//页面显示动画，默认为”slide-in-right“；
          },
          waiting: {
            autoShow: true,//自动显示等待框，默认为true
            title: '正在加载...',//等待对话框上显示的提示内容
          }
        })

      }
    },
    mounted: function () {
//    this.$store.getters.Get_Bot_C_obj
      let wish_header = window.getComputedStyle(this.$refs.wish_header, "height").height.replace("px", "");
      let bg_all_w_d = window.getComputedStyle(this.$refs.bg_all_w_d, "height").height.replace("px", "");
      let main_h = document.body.clientHeight;
      let wish_detail_nav = window.getComputedStyle(this.$refs.wish_detail_nav, "height").height.replace("px", "");
      this.$refs.wish_detail_main.style.height = main_h - parseInt(wish_header) - parseInt(wish_detail_nav) - parseInt(bg_all_w_d) + "px";

      common.go_back(this);
//      //get init data
//      /api/user/wish/getWishDetails
      this.p_num =  sessionStorage.getItem("p_num");
      this.user_image=  sessionStorage.getItem("user_image");

      //判断是否 显示 参与
      let this_detail_page_user_id = sessionStorage.getItem("detail_user_wish_id");
      let user_id = sessionStorage.getItem("user_id");
      if(this_detail_page_user_id === user_id){
          this.is_Me = true;
      }

      Indicator.open();
      this.$http.get('/yizhiweimen/api/user/wish/getWishDetails/'+ sessionStorage.getItem("wish_detail_id"),
        qs.stringify(
          {
            'wishId': sessionStorage.getItem("wish_detail_id"),
          })
        )
        .catch((thrown) => {
          Indicator.close();
        }).then((e) => {
        Indicator.close();
        this.d_wish = e.data;
      })


      //微信分享配置
      //获取当前 url
      let url = location.href;
      url = url.split("#")[0];
      Indicator.open();
      //获取分享配置
      this.$http.post('/yizhiweimen/api/wxUtil/getSign',
        qs.stringify(
          {
            "url": url
          })
      )
        .then((e) => {
          // 上面两个请求都完成后，才执行这个回调方法
          Indicator.close();
          let data = e.data

          let link = "http://wx.yizhiweimeng.com/yizhiweimen/static/wish.html";
          let post_name = this.list_d.postName
          let img = this.list_d.images
          let url_list = "http://wx.yizhiweimeng.com/yizhiweimen/api/user/wxLogin/getwxLogin/4";
          let prod_id = sessionStorage.getItem("off_post_id");
          let post = this.$http.post;

          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名，见附录1
            jsApiList: ["onMenuShareTimeline"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });

          wx.onMenuShareTimeline({
            title: post_name, // 分享标题
            link: url_list + "?prod_id=" + prod_id + "&url=" + link, // 分享链接，该链接域名必须与当前企业的可信域名一致
            imgUrl: "https://wx.yizhiweimeng.com/yizhiweimen/static/" + img, // 分享图标
            success: function () {
            },
            cancel: function () {
            }
          });

        })
        .catch((e) => {
          console.log(e)
//          Toast({
//            message: "网络出222错",
//            position: 'bottom',
//            duration: 2000
//          });
        })
    },
    components: {
      share_t
    }
  }
</script>
<!--inner style for thom template-->
<style>
  html,body{
    background-color: #eeeeee;
  }
</style>
<style scoped>
  .top_png{
    position: fixed;
    top: 156vw;
    right: 5vw;
    z-index: 1000;
    width: 7.7vw;
    height: 7.7vw;

  }
  /*wish_detail_main s*/
  .wish_detail_main_S_list_box {
    width: 100%;
    height: 10.6vw;
    line-height: 10.6vw;
    text-align: center;
    color: #fff;
    background-color: #89c774;
    border-radius: 2vw;
  }
  .wish_detail_Main_scheme_list_real {
    position: absolute;
    width: 30vw;
    font-size:4vw;
    border-radius:2vw;
    top: 0;
    left: -31vw;
    z-index:100;
    background-color: #b4d9a3;
  }
  .wish_detail_Main_scheme_list_wrapper {
    position: fixed;
    top: 146vw;
    right: 5vw;
    z-index: 100;
  }
  .wish_detail_chema_list {
    width: 7.7vw;
    height: 7.7vw;
  }
  .wish_detail_main {
    position: relative;
  }

  .wish_detail_Main_scheme {
    width: 89vw;
    margin: 8vw auto 0;
    border-radius: 2vw;
    box-shadow: 1px 1px 2px 4px #808080;
  }
  .pl_header_scheme {
    position: relative;
  }
  .pl_header{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    right:4vw;
  }
  .wish_detaill_main_mess {
    height: 35.2vw;
    overflow-y: scroll;
    padding: 2vw;
    font-size: 4vw;
    color: #a0a0a0;
  }
  .wish_detail_main_wish_detail_header {
    width: 100%;
    height: 7.3vw;
    line-height: 7.3vw;
    color: #fff;
    text-align: center;
    font-size: 4vw;
    background-color: #9f5c2f;
    border-radius: 2vw 2vw 0 0;
  }
  .wish_detail_main_wish_detail {
    width: 89vw;
    height: 42vw;
    border-radius: 2vw;
    margin: 4vw auto 0;
    box-shadow: 1px 1px 4px 2px #808080;
  }
  .wish_detail_main_user_name {
    width: 38vw;
    height: 6.9vw;
    line-height: 6.9vw;
    color: #fff;
    background-color: #9f5c2f;
    border-radius: 2vw;
    text-align: center;
    font-size: 4vw;
    margin: 0 auto;
  }
  .wish_detail_main {
    margin-top: 2vw;
    position: relative;
  }
  .wish_detail_header_left{
    position:absolute;
    top:0;
    left:0;
  }
  .wish_detail_header_right{
    position:absolute;
    top:0;
    right:0;
  }
  .wish_detail_main_top_btn {
    height: 6.9vw;
    line-height: 6.9vw;
    font-size: 4vw;
    width: 16.8vw;
    background-color: #aaaaaa;
    color: #fff;
    text-align: center;
  }
  /*wish_detail_main e*/
  /*wish_detail_nav s*/
  .wish_detail_name_img {
    height: 5.3vw;
    width: 5.3vw;
    border-radius: 2vw;
    vertical-align: sub;
  }
  .wish_detail_name {
    margin-left: 3.4vw;
  }
  .wish_detail_people{
    margin-right:6.9vw;
  }
  .wish_detail_nav {
    line-height: 8.2vw;
    height: 8.2vw;
    color: #a3a3a3;
    font-size: 4vw;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dcdcdc;
  }
  /*wish_detail_nav e*/
  /*wish_detail s*/
  .bg_all_w_d {
    width: 100%;
    height: 56vw;
    display: block;
    margin-top: 11.7vw;
  }
  .wish_detail_header_detail {
    width: 5.6vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5.6vw;
  }
  .wish_detail_list_img {
    width: 3.8vw;
    padding-right: 2vw;
    vertical-align: middle;
  }
  .wish_detail_list_btn {
    height: 8.8vw;
    line-height: 8.8vw;
    text-align: center;
    color: #fff;
  }
  .wish_detail_list {
    width: 20.8vw;
    position: absolute;
    top: 9vw;
    right: 0.8vw;
    background-color: #b27a57;
    border-radius: 2vw;
  }
  .wish_header .wish_detail_rotate_90 {
    transform: rotate(-90deg) translateX(50%);
    right: 6vw;
    left: initial
  }
  /*wish_detail e*/
  /*wish_mid*/
  .wish_main {
    overflow-y: scroll;
    background-color: #eeeeee;
  }
  .wish_mid_wish .wish_mid_act_btn {
    color: #9f5c2f
  }
  .wish_mid_wish {
    height: 8.8vw;
    line-height: 8.8vw;
    color: #b5b5b5;
    font-size:3vw;
    text-align:center;
    display:flex;
    justify-content:space-around;
  }
  .wish_header_title {
    text-align: right;
  }
  .wish_header_w {
    text-indent: 6vw;
  }
  .wish_mid_right {
    line-height:1.2;
    font-size: 3.5vw;
    text-align:left;
    color: #9f5c2f;
    width: 66vw;
    height: 13.2vw;
    background-color: #fff;
    border-radius: 2vw;
    margin-top:2.1vw;
    padding:3vw;
  }
  .wish_seed {
    width: 16.6vw;
    display: block;
    padding-left: 4.8vw;
    padding-top: 3.4vw;
    height:15.3vw;
    margin-right:3.2vw;
  }
  .wish_mid {
    display:flex;
    height: 23.2vw;
    background-color: #eeeeee;
  }
  /*wish_mid*/
  .add_wish {
    width: 18vw;
    height: 7.2vw;
    line-height: 7.2vw;
    color: #fff;
    font-size: 3.5vw;
    border-radius: 2vw;
    background-color: #d84848;
    margin-left: 2.5vw;
    display: inline-block;
    text-align: center;
  }
  .input_search {
    width: 42vw;
    height: 7.2vw;
    line-height: 7.2vw;
    color: #9f5c2f;
    border-radius: 2vw;
    margin-left: 18vw;
    border: 0;
  }
  .wish_header {
    height: 11.7vw;
    line-height: 11.7vw;
    color: #fff;
    font-size: 4vw;
    background-color: #ffffff;
    position: fixed;
    text-align: center;
    width:100%;
    z-index:1000;
    top:0;
  }

  .wish_header_n {
    font-size: 4.5vw;
    color: #3a210f;
  }

  .back_c{
    height:6vw;
    width:5vw;
    position:absolute;
    top:50%;
    left:1.3vw;
    transform:translateY(-50%);
  }
  /*愿望s*/
  .wish_need_header {
    height: 6vw;
    line-height: 6vw;
    background-color: #dcdcdc;
    color: #6a6a6a;
    font-size: 3vw;
    border-radius: 2vw 2vw 0 0;
    text-align: left;
    color: #6c6c6c;
    font-weight:bold;
  }
  .wish_need {
    width: 82vw;
    height: 26.6vw;
    margin: 2vw auto;
    border-radius: 2vw;
    background-color: #eeeeee;
  }
  .input_wish_main {
    width: 70.2vw;
    /*height: 60vw;*/
    background-color: #eeeeee;
    border-radius: 0 0 2vw 2vw;
    height:29vw;
    resize:none;
    padding:0;
    margin:0;
    border:0;
  }

  .input_wish_header_title_inner {
    line-height: 6vw;
    height: 6vw;
    width: 100%;
    font-size: 3.5vw;
    color: #727272;
    border-radius:2vw 2vw 0 0;
    background-color: #dcdcdc;
    text-align:left;
    font-weight:bold;
  }
  .input_wish_header_n {
    margin-top: 3vw;
    padding-bottom: 3vw;
    border-bottom: 2px solid #f5f5f5;
  }
  .input_wish_header_right {
    width: 70.2vw;
    height: 35vw;
    border-radius: 2vw;
    background-color: #eeeeee;
    float: left;
    margin-left: 2.6vw;
  }
  .input_wish_header_left {
    float: left;
    margin-left: 2.6vw;
  }
  .input_wish_header_left_id {
    text-align: center;
    color: #787878;
    font-size: 2.5vw;
    line-height: 1.2;
  }
  .input_wish_header_left_name {
    color: #787878;
    font-size: 2.5vw;
    line-height:1.2;
  }
  .image_n {
    width: 12vw;
    height: 12vw;
    border-radius: 1vw;
    font-size: 2.5vw;
  }
  .input_wish_header_b_btn {
    width: 16.5vw;
    line-height: 6.4vw;
    height: 6.4vw;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 50%;
    border-radius: 2vw;
    font-size: 3.5vw;
  }
  .input_wish_header_b_btn_1 {
    right: 22vw;
    transform: translateY(-50%);
    background-color: #959595;
  }
  .input_wish_header_b_btn_2 {
    right: 3.4vw;
    transform: translateY(-50%);
    background-color: #80c26a;
  }
  .input_wish_header_bottom {
    height: 9.7vw;
    line-height: 9.7vw;
    border-radius: 0 0 2vw 2vw;
    position:relative;
  }
  .input_wish_input_img {
    width: 16.9vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .wish_header {
  }
  .input_wish_header_middle_img {
    height: 41.8vw;
    width: 100%;
    position: relative;
    border-bottom: 1px solid #eaeaea;
  }
  ::-webkit-input-placeholder {
    color:#fff;
  }
  /* 使用webkit内核的浏览器 */
  :-moz-placeholder {
    color: #fff;
  }
  /* Firefox版本4-18 */
  ::-moz-placeholder {
    color: #fff;
  }
  /* Firefox版本19+ */
  :-ms-input-placeholder {
    color: #fff;
  }
  /* IE浏览器 */
  .input_wish_header_header {
    border-bottom: 1px solid #eaeaea;
    height: 8.4vw;
    line-height: 8.4vw;
    text-align: center;
    color: #fff;
    font-size: 4vw;
    border-radius: 2vw 2vw 0 0;
    background-color: #9f5c2f;
  }
  .wish_container {
    height: auto;
    background-color: #eeeeee;
  }
  /*input_wish_header s*/
  .input_wish_header {
    width: 94vw;
    border-radius: 2vw;
    margin: 2.6vw auto;
    background-color: #fff;
    border-radius: 2vw;
    margin-bottom:0;
    padding-bottom:2vw;
  }
  /*input_wish_header e*/
  /*al_read_send_btn s*/
  .al_read_send_btn {
    width: 21.6vw;
    height: 7.3vw;
    line-height: 7.3vw;
    text-align: center;
    border-radius: 2vw;
    color: #fff;
    background-color: #d84848;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 4vw;
    transform: translateY(-50%);
  }
  /*愿望e*/
</style>

